<template>
    <!-- fix 恶意删除maxlength属性 -->
    <el-input v-if="config.maxlength"
              type="textarea" :value="value" :maxlength="config.maxlength" v-bind="getComposeProps()" @input="onInput"/>
    <el-input v-else
              type="textarea" :value="value" v-bind="getComposeProps()" v-on="$listeners"/>
</template>

<script>
    export default {
        props: {
            value: '',
            config: Object,
        },
        data() {
            this.$textarea = null
            return {}
        },
        methods: {
            getComposeProps() {
                return Object.assign({
                    rows: 4,
                    autosize: false,
                }, this.config.props)
            },
            onInput(val) {
                if (val.length >= this.config.maxlength) return setTimeout(() => {
                    this.$textarea.value = val.slice(0, this.config.maxlength)
                })
                this.$listeners.input(val)
            },
        },
        mounted() {
            this.$textarea = this.$el.getElementsByTagName('textarea')[0]
        }
    }
</script>

<style lang="scss" scoped>

</style>
